<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全屏活力饼图（Excel数据源）</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" ></script>
    <!-- 引入SheetJS库用于Excel解析 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #fileInput {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            padding: 8px 12px;
            background: #FFD700;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 文件上传控件 -->
    <input type="file" id="fileInput" accept=".xlsx" style="display: none;" />
    <button onclick="document.getElementById('fileInput').click()">选择Excel文件</button>

    <!-- 图表容器 -->
    <div id="main" style="width: 100%; height: 100%;"></div>

    <script>
        // 初始化图表
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        // 文件选择事件处理
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            // 读取Excel文件
            const reader = new FileReader();
            reader.onload = function(e) {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, {type: 'array'});
                const sheetName = workbook.SheetNames[0]; // 取第一个工作表
                const worksheet = workbook.Sheets[sheetName];
                const json = XLSX.utils.sheet_to_json(worksheet, {header:1});

                // 提取user_level列数据（假设第10列为user_level）
                const userLevels = [];
                const headers = json[0];
                const userLevelIndex = headers.findIndex(col => col === 'user_level');
                if (userLevelIndex === -1) {
                    alert('未找到user_level列');
                    return;
                }

                for (let row of json.slice(1)) {
                    if (row[userLevelIndex] !== undefined) {
                        userLevels.push(Number(row[userLevelIndex]));
                    }
                }

                // 统计每个等级的出现次数
                const levelCounts = {};
                userLevels.forEach(level => {
                    levelCounts[level] = (levelCounts[level] || 0) + 1;
                });

                // 生成ECharts数据格式（添加百分比显示）
                const dataForChart = Object.entries(levelCounts).map(([level, count]) => ({
                    value: count,
                    name: `等级 ${level}`,
                    // 百分比计算（在tooltip中直接使用ECharts内置参数）
                }));

                // 更新图表配置
                option = {
                    ...option,
                    series: [{
                        ...option.series[0],
                        data: dataForChart.sort((a, b) => a.value - b.value),
                    }]
                };
                myChart.setOption(option);
            };
            reader.readAsArrayBuffer(file);
        });

        // 初始配置（保持原样，但数据为空）
        option = {
            backgroundColor: '#001f3f',
            title: {
                text: '用户等级分布',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#FFD700',
                    fontSize: 24
                }
            },
            tooltip: {
                trigger: 'item',
                // 添加百分比显示
                formatter: "{a} <br/>{b}: {c} ({d}%)", // 显示名称、数值、百分比
                backgroundColor: 'rgba(0,0,0,0.7)',
                textStyle: {
                    color: '#fff'
                }
            },
            series: [{
                name: '用户等级',
                type: 'pie',
                radius: '60%',
                center: ['50%', '50%'],
                data: [], // 初始化为空
                roseType: 'radius',
                color: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD'],
                label: {
                    color: '#fff',
                    fontSize: 14
                },
                labelLine: {
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    },
                    smooth: 0.2,
                    length: 15,
                    length2: 25
                },
                itemStyle: {
                    borderRadius: 5,
                    shadowBlur: 100,
                    shadowColor: 'rgba(255,255,255,0.3)'
                },
                animationType: 'expansion',
                animationEasing: 'elasticOut',
                animationDelay: (idx) => Math.random() * 200
            }]
        };

        // 响应窗口变化
        window.addEventListener('resize', () => myChart.resize());
        myChart.setOption(option);
    </script>
</body>
</html>